{% extends 'base.html' %}

{% block title %}文章列表 - {{ site_info.site_name }}{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>文章列表</h2>
            <form method="get" class="d-flex">
                <input type="text" name="q" class="form-control me-2" placeholder="搜索文章..." value="{{ search_query }}">
                <button type="submit" class="btn btn-primary">搜索</button>
            </form>
        </div>
        
        {% if search_query %}
            <div class="alert alert-info mb-4">
                搜索结果: "{{ search_query }}"
                <a href="{% url 'articles:list' %}" class="float-end">清除搜索</a>
            </div>
        {% endif %}
        
        {% if articles %}
            <div class="row">
                {% for article in articles %}
                    <div class="col-md-6 mb-4">
                        <div class="card h-100">
                            <div class="card-body">
                                <h3 class="card-title">{{ article.title }}</h3>
                                <p class="card-text text-muted">
                                    <small>
                                        <i class="fas fa-user me-1"></i> {{ article.author.username }}
                                        <i class="fas fa-calendar-alt ms-3 me-1"></i> {{ article.created_at|date:"Y年m月d日" }}
                                        {% if article.visit_count %}
                                        <span class="ms-3">
                                            <i class="fas fa-eye"></i> {{ article.visit_count }}
                                        </span>
                                        {% endif %}
                                    </small>
                                </p>
                                <p class="card-text">{{ article.content|striptags|truncatechars:150 }}</p>
                            </div>
                            <div class="card-footer bg-transparent text-end">
                                <a href="{% url 'articles:detail' article.id %}" class="btn btn-primary">阅读更多</a>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
            
            <!-- 分页 -->
            {% if is_paginated %}
                <nav aria-label="Page navigation" class="my-4">
                    <ul class="pagination justify-content-center">
                        {% if page_obj.has_previous %}
                            <li class="page-item">
                                <a class="page-link" href="?page=1{% if search_query %}&q={{ search_query }}{% endif %}" aria-label="First">
                                    <span aria-hidden="true">&laquo;&laquo;</span>
                                </a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if search_query %}&q={{ search_query }}{% endif %}" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                        {% endif %}
                        
                        {% for num in page_obj.paginator.page_range %}
                            {% if page_obj.number == num %}
                                <li class="page-item active"><a class="page-link" href="#">{{ num }}</a></li>
                            {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                                <li class="page-item"><a class="page-link" href="?page={{ num }}{% if search_query %}&q={{ search_query }}{% endif %}">{{ num }}</a></li>
                            {% endif %}
                        {% endfor %}
                        
                        {% if page_obj.has_next %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if search_query %}&q={{ search_query }}{% endif %}" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                            <li class="page-item">
                                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if search_query %}&q={{ search_query }}{% endif %}" aria-label="Last">
                                    <span aria-hidden="true">&raquo;&raquo;</span>
                                </a>
                            </li>
                        {% endif %}
                    </ul>
                </nav>
            {% endif %}
        {% else %}
            <div class="alert alert-info">
                {% if search_query %}
                    没有找到与 "{{ search_query }}" 相关的文章。
                {% else %}
                    目前还没有文章。
                {% endif %}
            </div>
        {% endif %}
    </div>
</div>
{% endblock %} 